<!-- 商品详情页 -->
<template>
  <div class="classify-detail">
    <RollbackBarView :title="headline" :to="'/'" />
    <div class="sort-bar">
      <a class="default-sort" :class="{ active: cutId == 0 }" @click="cutAct(0)"
        >默认</a
      >
      <a class="price-sort" :class="{ active: cutId == 1 }" @click="cutAct(1)"
        >价格</a
      >
      <a class="sales-sort" :class="{ active: cutId == 2 }" @click="cutAct(2)"
        >销量</a
      >
    </div>
    <div class="detail-list">
      <div class="list-item" v-for="item in detailList" :key="item.id">
        <router-link tag="div" :to="`/goodsdetail/${item.id}`" class="item-img"
          ><img :src="item.img" alt=""
        /></router-link>
        <div class="main">
          <p class="title line-ellipsis">{{ item.title }}</p>
          <div class="price">￥{{ item.price }}</div>
          <div class="sales">
            <span>销量：{{ item.sales }}</span>
            <van-icon name="shopping-cart-o" />
          </div>
        </div>
      </div>
      <div class="list-item-bg"></div>
      <div class="list-item-bg"></div>
    </div>
  </div>
</template>

<script>
import { getTeaClassifyDetail } from "@/api/inedx";
import RollbackBarView from "@/components/RollbackBarView.vue";
export default {
  data() {
    return {
      detailList: [],
      cutId: 0,
      type: "",
      headline: "",
      userId: "",
    };
  },
  methods: {
    async getDetailList() {
      let { data } = await this.$http(
        getTeaClassifyDetail(this.$route.params.id)
      );
      let classifyId = this.$route.params.id;
      if (classifyId == 1) {
        this.headline = "绿茶";
      }
      if (classifyId == 2) {
        this.headline = "红茶";
      }
      if (classifyId == 3) {
        this.headline = "花茶";
      }
      this.detailList = data.data;
    },
    cutAct(id) {
      this.cutId = id;
      if (this.cutId == 0) {
        this.type = "id";
        this.detailList = this.nextSort();
      }
      if (this.cutId == 1) {
        this.type = "price";
        this.detailList = this.nextSort();
      }
      if (this.cutId == 2) {
        this.type = "sales";
        this.detailList = this.upSort();
      }
    },
    // 向下排序
    nextSort() {
      let arr = this.detailList;
      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j][this.type] > arr[j + 1][this.type]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      return arr;
    },
    // 向上排序
    upSort() {
      let arr = this.detailList;
      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j][this.type] < arr[j + 1][this.type]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      return arr;
    },
    // 加入购物车
    addGoods(val, id) {
      this.$http
        .post("http://192.168.27.59/addGoodsCar", {
          id: val,
          userId: id,
        })
        .then(({ data }) => {
          if (data.code == 300) {
            this.$toast(data.message);
          }
          this.$toast(data.message);
        });
    },
  },
  created() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if (userInfo) {
      this.userId = userInfo.userId == null ? "" : userInfo.userId;
    }
  },
  async mounted() {
    await this.getDetailList();
  },
  components: { RollbackBarView },
};
</script>

<style lang="scss" scoped>
.classify-detail {
  width: 100vw;
  background-color: #fff;

  .sort-bar {
    width: 100%;
    display: flex;
    a {
      padding: 0.625rem 0;
      margin: 0 0.9375rem;
      font-size: 14px;
      display: block;
      position: relative;
    }
    .price-sort.active {
      // &::after {
      //   content: "";
      //   width: 0;
      //   height: 0;
      //   border: 4px solid transparent;
      //   border-bottom: 4px solid #56bb37;
      //   position: absolute;
      //   top: 0.5rem;
      //   right: -0.625rem;
      // }
      // &::before {
      //   content: "";
      //   width: 0;
      //   height: 0;
      //   border: 4px solid transparent;
      //   border-top: 4px solid #333;
      //   position: absolute;
      //   top: 1.125rem;
      //   right: -0.625rem;
      // }
    }
    a.active {
      color: #56bb37;
    }
  }
  .detail-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .list-item {
      width: 7.5rem;
      font-size: 14px;
      margin: 0.625rem 0 0.625rem;
      background-color: #fff;
      border: 1px solid #eee;
      padding: 0.3125rem 0;
      .item-img {
        img {
          width: 100%;
        }
      }
      .main {
        padding: 0 0.625rem;
        .price {
          color: #56bb37;
          padding: 0.3125rem 0;
        }
        .sales {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: #56bb37;
          }
        }
      }
    }
    .list-item-bg {
      width: 7.5rem;
    }
  }
}
</style>
